<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="门店查询" prop="storeName">
        <el-input
          v-model="queryParams.storeName"
          placeholder="请输入门店查询名称"
          clearable
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="日期查询" prop="dateTime">
        <el-date-picker
          clearable
          v-model="queryParams.dateTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="content">
      <div v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.name }}</div>
        <div class="time">
          <div class="line" v-for="(i, indexs) in item.time1" :key="indexs">
            <el-tooltip
              v-if="i.appointment"
              class="item"
              effect="dark"
              placement="top"
            >
              <template slot="content">
                <div>开始时间：{{ i.subscribeStartTime }}</div>
                <div>结束时间：{{ i.subscribeEndTime }}</div>
              </template>
              <div :class="i.appointment ? 'item-bg' : 'item'"></div>
            </el-tooltip>
            <div v-else :class="i.appointment ? 'item-bg' : 'item'"></div>

            <div class="itme-time">{{ i.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <pagination
      class="mb-30"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getOneDayBusyTime } from "@/api/system/personnelMatters/technicianClock";
export default {
  components: {},
  name: "Store",
  data() {
    return {
      time: [],
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeName: "",
        dateTime: "",
      },
      total: 0,
    };
  },
  created() {
    this.time = this.initialization();
    this.getList();
  },
  methods: {
    initialization() {
      let arr = [];
      for (let index = 0; index < 901; index++) {
        arr.push({
          label: "",
          value: "",
          appointment: false,
        });
        if (index == 0) {
          arr[index].label = "09:00";
        }
        if (index == 60) {
          arr[index].label = "10:00";
        }
        if (index == 120) {
          arr[index].label = "11:00";
        }
        if (index == 180) {
          arr[index].label = "12:00";
        }
        if (index == 240) {
          arr[index].label = "13:00";
        }
        if (index == 300) {
          arr[index].label = "14:00";
        }
        if (index == 360) {
          arr[index].label = "15:00";
        }
        if (index == 420) {
          arr[index].label = "16:00";
        }
        if (index == 480) {
          arr[index].label = "17:00";
        }
        if (index == 540) {
          arr[index].label = "18:00";
        }
        if (index == 600) {
          arr[index].label = "19:00";
        }
        if (index == 660) {
          arr[index].label = "20:00";
        }

        if (index == 720) {
          arr[index].label = "21:00";
        }
        if (index == 780) {
          arr[index].label = "22:00";
        }
        if (index == 840) {
          arr[index].label = "23:00";
        }
        if (index == 900) {
          arr[index].label = "24:00";
        }
      }
      return arr;
    },
    minutesBetween(date1, date2) {
      const oneMinute = 60000; // 毫秒数表示一分钟
      const difference = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差
      return Math.floor(difference / oneMinute); // 将毫秒转换为分钟并向下取整
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        storeName: "",
        dateTime: "",
      };
      this.resetForm("queryForm");
      this.getList();
    },

    getList() {
      getOneDayBusyTime(this.queryParams).then((res) => {
        // this.list = res.rows
        this.list = [];
        this.total = res.total;

        res.rows.forEach((element) => {
          this.list.push({
            name: element.name,
            time: this.time,
            zyOrderItemList: element.zyOrderItemList,
          });
        });
        this.list.forEach((element, i) => {
          this.list[i].time1 = [];
          this.list[i].time1 = this.initialization();
          this.list[i].zyOrderItemList.forEach((item, index) => {
            let data = new Date(
              item.subscribeStartTime.slice(0, 10) + " 09:00"
            );
            let date1 = new Date(item.subscribeStartTime);
            let date2 = new Date(item.subscribeEndTime);
            // 开始距离当天 9点
            item.data1 = this.minutesBetween(data, date1);
            // 结束距离当天 9点
            item.data2 = this.minutesBetween(data, date2);
            // 除以10
            // item.data2 = Math.floor(item.data2 / 5)
            // item.data1 = Math.floor(item.data1 / 5)
            this.list[i].time1.forEach((t, s) => {
              if (item.data1 < s && s <= item.data2) {
                t.appointment = true;
                t.subscribeStartTime = item.subscribeStartTime;
                t.subscribeEndTime = item.subscribeEndTime;
              }
            });
          });
        });

        console.log(this.list, "list");
      });
    },
  },
};
</script>
<style>
.time {
  display: flex;
  margin-left: 20px;
}

.title {
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 700;
  /* text-align: center; */
}

.item {
  width: 1.5px;
  height: 50px;
  border-bottom: 1px solid #000;
  /* border-left: 1px solid #999; */
}

.item-bg {
  width: 1.5px;
  height: 50px;
  border-bottom: 1px solid #000;
  background: #e7e2e2;
}

.itme-time {
  margin-left: -35px;
  margin-top: 10px;
  font-size: 14px;
}

/* 选择所有列表中的最后一个列表项，并对其进行样式设置 */
.time .line:last-child > .item {
  border-bottom: none;
  border-left: 1px solid #000;
}

.time .line:nth-child(60n + 1) > .item {
  border-left: 1px solid #000;
}

.content {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.mb-30 {
  margin-bottom: 30px;
}
</style>
